<template>
	<view class="page">
		<view class="flex-col section p-card">
		  <view class="flex-row justify-between items-center group_4">
		    <text class="font_2 text_3">{{config.bank_name}}</text>
		    <image
		      class="image_4"
		      src="/static/withdrawl-card.png"
		    />
		  </view>
		  <text class="self-start font_1 text_4">银行卡</text>
		  <view class="flex-row group_5 space-x-6">
			<!--  
		    <text class="self-start font_3">****</text>
		    <text class="self-start font_3">****</text>
		    <text class="self-start font_3">****</text>
			 -->
		    <text class="font_3">{{config.bank_card}}</text>
		  </view>
		</view>
		<view class="flex-col section_1">
			<view class="title">收益提现</view>
			<view class="align-center">
				<text class="text_2">￥</text>
				<input type="digit" class="inpt" placeholder="请输入提现金额" v-model="money">
			</view>
			<view class="divider"><!--*--></view>
			<view class="group_6">
				<text class="text_4">当前可提现收益为：</text>
				<text class="text_4" style="color:#FF1C1C;">￥{{config.money || 0}}</text>
				<!-- <text class="text_5" @tap="withdrawlAll">全部提现</text> -->
			</view>
			<!-- ，最高提现{{config.max}}元，提现每笔增加{{config.times}}元 -->
			<view class="tips-wrap">
				<text class="tips">最低提现{{config.min}}元</text>
			</view>
			
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					申请提现
				</view>
			</template>
		</submit-btn>
	</view>

</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const withdrawl = defineComponent({
	components:{
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			money:'',
	        config:{},
		})
		// watchEffect(()=>{
		// })
		onLoad(()=>{
			getConfig();
		})
		const getConfig = async()=>{
			let res = await uni.$request('money.take_cash_config');
			data.config = res.data;
		}
		const submitRef = ref();
		const submit= async ()=>{
			if(! uni.$tools.match( data.money,'nonull',"请输入提现金额")){
			    return;
			}
			if(! /^[1-9][0-9]*(\.[0-9]+)?$/.test(data.money)){
				uni.$tools.msg('请输入正确金额')
			    return;
			}
			if( data.money < data.config.min){
				uni.$tools.msg('最小提现金额￥'+data.config.min)
			    return;
			}
			if( data.money > data.config.money){
				uni.$tools.msg('最大可提现金额￥'+data.config.money)
			    return;
			}
			
			const sendData:any={
				money:data.money
			}
			let res = await uni.$request('money.take_cash',sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		}
		return {
			...toRefs(data),
			submitRef,
			submit,
		};
	}
})
export default withdrawl;
</script>

<style lang="scss">
page{
	background-color: #f7f7f7;
}
.page{
	padding: 30rpx;
}
.p-card{
	  padding: 30rpx 28rpx;
	  background-color: #256ae5;
	  border-radius: 10rpx;
	  margin-bottom: 24rpx;
	  .group_4 {
	    padding: 0 2rpx;
	    .font_2 {
	      font-size: 34rpx;
	      font-family: PingFang;
	      line-height: 32rpx;
	    }
	    .text_3 {
	      color: #ffffff;
	    }
	    .image_4 {
	      width: 52rpx;
	      height: 38rpx;
	    }
	  }
	  .font_1 {
	    font-size: 24rpx;
	    font-family: PingFang;
	    line-height: 23rpx;
	  }
	  .text_4 {
	    margin-top: 13rpx;
	    color: #ffffff;
	  }
	  .group_5 {
	    margin-top: 36rpx;
	    .font_3 {
	      font-size: 30rpx;
	      font-family: PingFang;
	      letter-spacing: 2.4rpx;
	      line-height: 13rpx;
	      color: #ffffff;
	    }
	  }
	  .space-x-6 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 6rpx;
	    }
	  }
}
.section_1 {
	padding: 30rpx;
	background-color: #ffffff;
	box-shadow: 0px 0px 27rpx #2a2a2a1a;
	border-radius: 12rpx;
	position: relative;
	margin-bottom: 80rpx ;
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 10rpx;
	}
	.divider {
		background-color: #0000000f;
		height: 2rpx;
	}
	.text_2 {
		color: #333333;
		font-size: 36rpx;
		font-family: PingFang;
		letter-spacing: 1.44rpx;
	}
	.inpt{
		margin-left: 11rpx;
		color: #333;
		font-size: 28rpx;
		font-family: PingFang;
		height: 70rpx;
		line-height: 70rpx;
		letter-spacing: 1.12rpx;
		width: 400rpx;
	}
	.group_6 {
		margin-top: 28rpx;
		align-self: flex-start;
		.text_4 {
			color: #666666;
			font-size: 24rpx;
			font-family: PingFang;
		}
		.text_5 {
			color: #333333;
			font-size: 28rpx;
			font-family: PingFang;
			font-weight: bold;
		}
	}
}
.tips-wrap{
	margin-top: 20rpx;
	.tips{
		font-size: 24rpx;
		color:#666;
		line-height: 32rpx;
	}
}
.p-btn{
	margin: 0 auto;
	width: 670rpx;
	height: 84rpx;
	background: #256ae5;
	border-radius: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	&.disabled{
		background-color: #eee;
	}
}
</style>
